<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>

 <div id="app">
   {{msg}}
   <ul>
     <li v-for="(item,index) in movies" @click="trigger(index)" :class="{active:isActive}">{{index}}-{{item}}</li>
   </ul>
 </div>
 <script src="../vue.js"></script>
 <script>
   //参数为对象类型
   const vm=new Vue({
     el:"#app",
     data:{
       msg:"hello",
       movies:['haiwang','火影忍者','黑猫警长','超人'],
       isActive:false
     },
     methods:{
       trigger(index) {
          this.isActive=!this.isActive
         console.log(index)
       }
     }
   })
 </script>
</body>
</html>